<div ng-controller="HrMainCtrl as vm">
    <section class="content-header">
        <!-- Content Header (Page header) -->
        <h1>
      Turnover Report
      <small></small>
    </h1>
        <ol class="breadcrumb">
            <li>
                <!-- <button class="btn btn-danger btn-xs" ng-click="vm.saveTurnoverLeaderTable()"><i class="fa fa-check-square-o"></i>Submit</button> -->
            </li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-md-6">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">Function Leader Turnover</h3>
                         <small class="text-warning">{{vm.leaderMsg}}</small>
                        <div class="pull-right">
                            <button ng-disabled="!vm.editable || vm.loading" class="btn btn-danger btn-xs" ng-click="vm.saveTurnoverLeaderTable()"><i class="fa fa-check-square-o"></i>Submit</button>
                        </div>
                        <p>Employees left IHG, please do not include internal transfer case.</p>
                    </div>
                    <div class="box-body table-responsive no-padding">
                        <table class="table table-hover">
                            <form class="form-inline">
                                <table class="table table-bordered table-condensed">
                                    <tr>
                                        <th>Function Leader</th>
                                        <th>MTD. </th>
                                        <th>YTD. </th>
                                    </tr>
                                    <tr ng-repeat="ret in vm.result2">
                                        <td>{{ret.type}}</td>
                                        <td>
                                            <input type="text" ng-disabled="!vm.editable" class="number-input" ng-model="ret.mtd" ng-change="vm.calculateYtd(ret)" />
                                        </td>
                                        <td>{{ret.ytd}}</td>
                                    </tr>
                                </table>
                            </form>
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <div class="col-md-6">
                <div class="box box-warning">
                    <div class="box-header with-border">
                        <h3 class="box-title">Exit Interview</h3>
                      <small class="text-warning">{{vm.interviewMsg}}</small>

                        <div class="pull-right">
                            <button ng-disabled="!vm.editable || vm.loading" class="btn btn-danger btn-xs" ng-click="vm.saveInterviewTable()"><i class="fa fa-check-square-o"></i>Submit</button>
                        </div>
                    </div>
                    <div class="box-body table-responsive no-padding" style="height: 330px">
                        <form class="form-inline">
                            <table class="table table-bordered table-condensed">
                                <tr>
                                    <th>Job Related</th>
                                    <th>MTD. </th>
                                    <th>YTD. </th>
                                </tr>
                                <tr ng-repeat="ret in vm.result3">
                                    <td>{{ret.type}}
                                        <input type="text" ng-disabled="!vm.editable" ng-model="ret.comment" ng-if="ret.input" />
                                    </td>
                                    <td>
                                        <input type="text" ng-disabled="!vm.editable" class="number-input" ng-model="ret.mtd" ng-change="vm.calculateYtd(ret)" />
                                    </td>
                                    <td>{{ret.ytd}}</td>
                                </tr>
                            </table>
                            <table class="table table-bordered table-condensed">
                                <tr>
                                    <th>Personal</th>
                                    <th>MTD. </th>
                                    <th>YTD. </th>
                                </tr>
                                <tr ng-repeat="ret in vm.result4">
                                    <td>{{ret.type}}
                                        <input type="text" ng-disabled="!vm.editable" ng-model="ret.comment" ng-if="ret.input" />
                                    </td>
                                    <td>
                                        <input type="text" ng-disabled="!vm.editable" class="number-input" ng-model="ret.mtd" ng-change="vm.calculateYtd(ret)" />
                                    </td>
                                    <td>{{ret.ytd}}</td>
                                </tr>
                            </table>
                            <table class="table table-bordered table-condensed">
                                <tr>
                                    <th>Others</th>
                                    <th>MTD. </th>
                                    <th>YTD. </th>
                                </tr>
                                <tr ng-repeat="ret in vm.result5">
                                    <td>{{ret.type}}
                                        <input type="text" ng-disabled="!vm.editable" ng-model="ret.comment" ng-if="ret.input" />
                                    </td>
                                    <td>
                                        <input type="text" ng-disabled="!vm.editable" class="number-input" ng-model="ret.mtd" ng-change="vm.calculateYtd(ret)" />
                                    </td>
                                    <td>{{ret.ytd}}</td>
                                </tr>
                            </table>
                        </form>
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
        </div>
        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title">Turnover by Department</h3>
                <small class="text-warning">{{vm.departMsg}}</small>
                <button ng-disabled="!vm.editable|| vm.loading" class="btn btn-danger btn-xs pull-right" ng-click="vm.saveTable()"><i class="fa fa-check-square-o"></i>Submit</button>
            </div>
            <div class="box-body table-responsive no-padding">
                <table class="table table-hover">
                    <form class="form-inline">
                        <table class="table table-bordered header-fixed">
                            <thead>
                            <tr>
                                <th>Depart</th>
                                <th>Period</th>
                                <th>Band 1</th>
                                <th>Band 2</th>
                                <th>Band 3</th>
                                <th>Band 4</th>
                                <th>Band 5</th>
                                <th>Band 6</th>
                                <th>Band 7</th>
                                <th>Band 8</th>
                                <th>Band 9</th>
                                <th>Band 10</th>
                                <th>Total</th>
                                <th>All total ({{vm.totalSum}})</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="ret in vm.result">
                                <td ng-show="ret.showDepart" rowspan="3">{{ret.depart}}</td>
                                <td>{{ret.type}}</td>
                                <td>
                                    <input type="text" ng-disabled="!vm.editable || (vm.brand=='HIEX' && ret.depart=='HR')" class="number-input" ng-model="ret.band1" ng-change="vm.calculate(ret)" />
                                </td>
                                <td>
                                    <input type="text" ng-disabled="!vm.editable || (vm.brand=='HIEX' && ret.depart=='HR')" class="number-input" ng-model="ret.band2" ng-change="vm.calculate(ret)" />
                                </td>
                                <td>
                                    <input type="text" ng-disabled="!vm.editable || (vm.brand=='HIEX' && ret.depart=='HR')" class="number-input" ng-model="ret.band3" ng-change="vm.calculate(ret)" />
                                </td>
                                <td>
                                    <input type="text" ng-disabled="!vm.editable || (vm.brand=='HIEX' && ret.depart=='HR')" class="number-input" ng-model="ret.band4" ng-change="vm.calculate(ret)" />
                                </td>
                                <td>
                                    <input type="text" ng-disabled="!vm.editable || (vm.brand=='HIEX' && ret.depart=='HR')" class="number-input" ng-model="ret.band5" ng-change="vm.calculate(ret)" />
                                </td>
                                <td>
                                    <input type="text" ng-disabled="!vm.editable || (vm.brand=='HIEX' && ret.depart=='HR')" class="number-input" ng-model="ret.band6" ng-change="vm.calculate(ret)" />
                                </td>
                                <td>
                                    <input type="text" ng-disabled="!vm.editable || (vm.brand=='HIEX' && ret.depart=='HR')" class="number-input" ng-model="ret.band7" ng-change="vm.calculate(ret)" />
                                </td>
                                <td>
                                    <input type="text" ng-disabled="!vm.editable || (vm.brand=='HIEX' && ret.depart=='HR')" class="number-input" ng-model="ret.band8" ng-change="vm.calculate(ret)" />
                                </td>
                                <td>
                                    <input type="text" ng-disabled="!vm.editable || (vm.brand=='HIEX' && ret.depart=='HR')" class="number-input" ng-model="ret.band9" ng-change="vm.calculate(ret)" />
                                </td>
                                <td>
                                    <input type="text" ng-disabled="!vm.editable || (vm.brand=='HIEX' && ret.depart=='HR')" class="number-input" ng-model="ret.band10" ng-change="vm.calculate(ret)" /> </td>
                                <td>{{ret.total}}</td>
                                <td rowspan="3" ng-show="ret.showDepart">{{ret.allTotal}}</td>
                            </tr>
                            <tr>
                                <th>Depart</th>
                                <th>Period</th>
                                <th>Band 1</th>
                                <th>Band 2</th>
                                <th>Band 3</th>
                                <th>Band 4</th>
                                <th>Band 5</th>
                                <th>Band 6</th>
                                <th>Band 7</th>
                                <th>Band 8</th>
                                <th>Band 9</th>
                                <th>Band 10</th>
                                <th>Total</th>
                                <th>All total ({{vm.totalSum}})</th>
                            </tr>
                            <tr>
                                <td colspan="2">Total</td>
                                <td>{{vm.total.band1}}</td>
                                <td>{{vm.total.band2}}</td>
                                <td>{{vm.total.band3}}</td>
                                <td>{{vm.total.band4}}</td>
                                <td>{{vm.total.band5}}</td>
                                <td>{{vm.total.band6}}</td>
                                <td>{{vm.total.band7}}</td>
                                <td>{{vm.total.band8}}</td>
                                <td>{{vm.total.band9}}</td>
                                <td>{{vm.total.band10}}</td>
                                <td>{{vm.totalSum}}</td>
                                <td>{{vm.totalSum}}</td>

                            </tr>
                        </tbody>
                        </table>
                    </form>
                </table>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
</div>
</section>
<!-- /.content -->
</div>
